<template>
  <div id="demo">
    <div id="top_box">
      <el-card shadow="hover">
        <el-row>
          <el-col :span="11">
            <span class="title_span">考评时间：</span>
            <el-date-picker
              v-model="chose_date"
              type="daterange"
              format="yyyy年M月d日"
              value-format="yyyy-MM-dd"
              range-separator="至"
              start-placeholder="开始月份"
              end-placeholder="结束月份"
              @change="pick_date">
            </el-date-picker>
            <i class="el-icon-warning-outline" title="时间周期从开始时间的0点至结束时间的24点" style="margin-left: 10px;font-size: 16px;color: #606266;"></i>
          </el-col>
          <el-col :span="2">
            <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
          </el-col>
        </el-row>
      </el-card>
    </div>
    <div id="table_box">
      <el-table
        :data="tableData"
        border
        stripe
        style="width: 100%">
        <el-table-column
          label="序号"
          type="index"
          width="60">
        </el-table-column>
        <el-table-column
          prop="teacher_name"
          label="教师姓名">
        </el-table-column>
        <el-table-column
          prop="grade"
          label="年级">
        </el-table-column>
        <el-table-column
          prop="classes"
          label="班级">
        </el-table-column>
        <el-table-column
          prop="majorevents"
          label="大项">
        </el-table-column>
        <el-table-column
          prop="detail"
          label="细项">
        </el-table-column>
        <el-table-column
          prop="score"
          label="分值">
        </el-table-column>
        <el-table-column
          prop="grade_by_name"
          label="审批人">
        </el-table-column>
        <el-table-column
          prop="grade_commit_name"
          label="发起人">
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="100">
          <template slot-scope="scope">
            <el-button @click="del(scope.row)" type="danger" size="mini">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div id="page_box">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="search_params.pageNum"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="search_params.pageSize"
        layout="total, sizes, prev, pager, next"
        :total="search_params.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Demo',

  data(){
    return {
      chose_date: [],
      tableData: [],
      search_params: {
        pageNum: 1,
        pageSize: 20,
        total: 100,
        start_time: '2020-04-22',
        end_time: '2020-04-23'
      },
    };
  }
}
</script>

<style scoped>

</style>
